<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<style>
    
  /* .bg {
    background-color: black;
  }
  .a {
        background-color: beige;
    } */
    div {
        width: 100px;
        height: 100px;
    }
    div ul {
       
        width: 500%;
    }
    div ul li {
        list-style: none;
        
    }
    div ul li img {
        float: left;
        width: 20%; 
    }
    div ol {
        position: absolute;
    }
    div ol li {
        list-style: none;
    }
</style>
    <title>Title</title>
</head>

<body>
    <div>
        <ul>
            <li><img src="images\潮图.JPG"></li>
            <li><img src="images\京东.png"></li>
            <li><img src="images\我的域名.png"></li>
            <li><img src="images\潮图.JPG"></li>
            <li><img src="images\京东.png"></li>
            
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
           
        </ol>
    </div>
    <script>
//     var startX = 0;
//     ul.addEventListener('touchstart',function(e){
//     startX = e.targetTouch[0].pageX;
// clearInterval(timer);
// ul.addEventListener('touchmove',function(e){
//     moveX = e.targetTouchs[0].pageX-startX;
//     var translateX=-index*w+moveX;
//     ul.style.transform='none';
//     ul.style.transform= 'translateX('+translateX+'px)';
// })
//     })
//     ul.addEventListener('touchend',function() {
//         if(Math.abs(moveX)>50){
//             if(moveX>0){
//                 index--;
//             }
//             else{
//                 index++;
//             }
//             var translateX = -index*w;
//             ul.style.transition = 'all.3s';
//             ul.style.transform = 'translateX('+translateX+'px)';
//         }
//     })
    
    </script>
   <!-- <div class="one two">
    <button class="a  bg">开关灯</button>
   </div> -->
        <!-- <script>
            var div = document.querySelector('div');
            div.classList.add('three');
            div.classList.remove('one');
            var btn = document.querySelector('button');
        btn.addEventListener('click',function() { -->
                <!-- document.body.classList.toggle('bg');
            }) -->
<!-- //             var ul = div.children[0];
//             var w = div.offsetWidth;
//             var index = 0;
//             var timer = setInterval(function () {
//                 index++;
//                 var translateX=-index*w;
//                 ul.style.translation = 'all .3s';
//                 ul.style.transform = 'translateX('+translateX+'px)';
//             },2000);
//             ul.addEventListener('transitionend',function () {
//                 //wyfenggundong无缝滚动
//                  if (index==3){ -->
<!-- // index=0;
// ul.style.translation='none';
// var translateX = -index*w;
// ul.style.transform = 'translateX('+translateX+'px)';
//             } --> 
<!-- //             else if(index<0){
//                 index=2;
//                 ul.style.translation='none';
//                 var translateX=-index*w;
//                 ul.style.transform='translateX('+translateX+'px)'
//             }
//             }) -->

            </>
   
</body>
</html>